<template>
  <div class="text_bounce">
    <h2 data-splitting class="headline" :class="animationName" v-html="htmlText"></h2>
  </div>
</template>

<script>
  export default {
    name: "text_bounce",  // 文字跳动
    data() {
      return {
        animationFlag: true,
        animationName: 'jump',  // jump  fall  flip  float  float-alt  jog  twirl
        text: 'PHP中文网',
        htmlText: ''
      }
    },
    watch: {
      text: {
        handler(value) {
          let arr = [...value];
          let total = '';
          arr.forEach(item => {
            let span = `<span>${item}</span>`;
            total += span;
          });
          this.htmlText = total;
        },
        immediate: true
      }
    },
    created() {

    },
    methods: {

    }
  }
</script>

<style scoped lang="scss">
  .text_bounce {
    /deep/ .headline {
      background-color: #f9ca24;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Lexend Deca", sans-serif;
      height: 300px;
      overflow: hidden;
      perspective: 1000px;
      scroll-snap-align: start;
      span{
        font-weight: 700;
        font-size: 60px;
        letter-spacing: 6px;
        // -webkit-animation: twirl 2s ease 0s 1 both;  // jump  fall  flip  float  float-alt  jog  twirl
         // 动画名称  动画所需时间  动画速度曲线  动画开始延迟时间  动画播放次数  是否应该轮流反向播放动画
      };
    }
    /deep/ .headline.jump{
      span{
        -webkit-animation: jump 1s ease 0s 3 both;
      }
    }
    /deep/ .headline.fall{
      span{
        -webkit-animation: fall 2s ease 0s 1 both;
      }
    }
    /deep/ .headline.flip{
      span{
        -webkit-animation: flip 2s ease 0s 1 both;
      }
    }
    /deep/ .headline.float,
    /deep/ .headline.float-alt{
      span:nth-child(even) {
        -webkit-animation: float-alt 2s ease 0s 1 both;
      }
      span:nth-child(odd) {
        -webkit-animation: float 2s ease 0s 1 both;
      }
    }
    /deep/ .headline.jog{
      span{
        -webkit-animation: jog 2s ease 0s 1 both;
      }
    }
    /deep/ .headline.twirl{
      span{
        -webkit-animation: twirl 2s ease 0s 1 both;
      }
    }
    .fall{
      -webkit-animation-name:fall;
      animation-name:fall;
    }
    @-webkit-keyframes fall {
      0% {
        transform: rotateY(-25deg);
      }
      25% {
        transform: translateY(2%) rotateY(25deg);
      }
      50% {
        transform: rotateY(-25deg);
      }
      75% {
        transform: translateY(4%) rotateY(25deg);
      }
      100% {
        transform: rotateY(-25deg);
      }
    }
    @keyframes fall {
      0% {
        transform: rotateY(-25deg);
      }
      25% {
        transform: translateY(2%) rotateY(25deg);
      }
      50% {
        transform: rotateY(-25deg);
      }
      75% {
        transform: translateY(4%) rotateY(25deg);
      }
      100% {
        transform: rotateY(-25deg);
      }
    }
    .flip{
      -webkit-animation-name:flip;
      animation-name:flip;
    }
    @-webkit-keyframes flip {
      5% {
        transform: rotateX(1turn);
      }
      10% {
        transform: rotateX(2turn);
      }
      20% {
        transform: rotateX(3turn);
      }
      40% {
        transform: rotateX(4turn);
      }
      70%, 100% {
        transform: rotateX(5turn);
      }
    }
    @keyframes flip {
      5% {
        transform: rotateX(1turn);
      }
      10% {
        transform: rotateX(2turn);
      }
      20% {
        transform: rotateX(3turn);
      }
      40% {
        transform: rotateX(4turn);
      }
      70%, 100% {
        transform: rotateX(5turn);
      }
    }
    .float{
      -webkit-animation-name:float;
      animation-name:float;
    }
    .float-alt{
      -webkit-animation-name:float-alt;
      animation-name:float-alt;
    }
    @-webkit-keyframes float {
      from {
        transform: translate(2%, -10%) rotate(-1deg);
      }
      to {
        transform: translate(-2%, 5%) rotate(3deg);
      }
    }
    @keyframes float {
      from {
        transform: translate(2%, -10%) rotate(-1deg);
      }
      to {
        transform: translate(-2%, 5%) rotate(3deg);
      }
    }
    @-webkit-keyframes float-alt {
      from {
        transform: translate(0%, -5%) rotate(-1deg);
      }
      to {
        transform: translate(2%, 10%) rotate(3deg);
      }
    }
    @keyframes float-alt {
      from {
        transform: translate(0%, -5%) rotate(-1deg);
      }
      to {
        transform: translate(2%, 10%) rotate(3deg);
      }
    }
    .jog{
      -webkit-animation-name:jog;
      animation-name:jog;
    }
    @-webkit-keyframes jog {
      0% {
        transform: translate(0, 0) rotate(5deg);
      }
      25% {
        transform: translate(5%, -5%) rotate(10deg);
      }
      50% {
        transform: translate(5%, 0) rotate(15deg);
      }
      75% {
        transform: translate(10%, -5%) rotate(10deg);
      }
      100% {
        transform: translate(0, 0) rotate(5deg);
      }
    }
    @keyframes jog {
      0% {
        transform: translate(0, 0) rotate(5deg);
      }
      25% {
        transform: translate(5%, -5%) rotate(10deg);
      }
      50% {
        transform: translate(5%, 0) rotate(15deg);
      }
      75% {
        transform: translate(10%, -5%) rotate(10deg);
      }
      100% {
        transform: translate(0, 0) rotate(5deg);
      }
    }
    .jump{
      -webkit-animation-name:jump;
      animation-name:jump;
    }
    @-webkit-keyframes jump {
      30% {
        transform: translateY(2%) scaleY(0.9);
      }
      50% {
        transform: translateY(-100%) scaleY(1.2);
      }
      70% {
        transform: translateY(10%) scaleY(0.8);
      }
      90% {
        transform: translateY(-5%) scaleY(1);
      }
      100% {
        transform: translateY(0) scaleY(1);
      }
    }
    @keyframes jump {
      30% {
        transform: translateY(2%) scaleY(0.9);
      }
      50% {
        transform: translateY(-100%) scaleY(1.2);
      }
      70% {
        transform: translateY(10%) scaleY(0.8);
      }
      90% {
        transform: translateY(-5%) scaleY(1);
      }
      100% {
        transform: translateY(0) scaleY(1);
      }
    }
    .twirl{
      -webkit-animation-name:twirl;
      animation-name:twirl;
    }
    @-webkit-keyframes twirl {
      2.5% {
        transform: rotateY(1turn);
      }
      5% {
        transform: rotateY(2turn);
      }
      10% {
        transform: rotateY(3turn);
      }
      20% {
        transform: rotateY(4turn);
      }
      40% {
        transform: rotateY(5turn);
      }
      70%, 100% {
        transform: rotateY(6turn);
      }
    }
    @keyframes twirl {
      2.5% {
        transform: rotateY(1turn);
      }
      5% {
        transform: rotateY(2turn);
      }
      10% {
        transform: rotateY(3turn);
      }
      20% {
        transform: rotateY(4turn);
      }
      40% {
        transform: rotateY(5turn);
      }
      70%, 100% {
        transform: rotateY(6turn);
      }
    }
  }
</style>
